<template>
  <div class="refresh-switch">
    <span>自动刷新</span>
    <el-switch v-model="refreshValue" />
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'RefreshSwitch',
})
</script>

<script lang="ts" setup>
import { computed, defineComponent, defineEmits, defineProps } from 'vue'

const props = defineProps({
  value: {
    type: Boolean,
    required: true,
  },
})

const emit = defineEmits(['update:value'])

const refreshValue = computed({
  get: () => props.value,
  set: (val) => {
    emit('update:value', val)
  },
})
</script>

<style lang="scss" scoped>
.refresh-switch {
  font-size: 13px;
  color: var(--color-base);

  & > span {
    margin-right: 14px;
  }
}
</style>
